<template>
  <div class="subcard-detail">
    <div class="detail-table">
      <Row>
        <Col span="24" class="detail-table__col detail-table__title">
          活动管理详情
        </Col>
      </Row>
      <Row>
        <Col span="12" class="detail-table__col">
          活动编号：{{ detail.activityCode }}
        </Col>
        <Col span="12" class="detail-table__col">
          活动名称：{{ detail.activityName }}
        </Col>
      </Row>
      <Row>
        <Col span="12" class="detail-table__col">
          开始时间：{{ (detail.activityStart || '').replace(/-/g, '/') }}
        </Col>
        <Col span="12" class="detail-table__col">
          结束时间：{{ (detail.activityEnd || '').replace(/-/g, '/') }}
        </Col>
      </Row>
      <div :key="i" v-if="type == 10" v-for="(rule, i) in extraRule">
        <Row>
          <Col span="12" class="detail-table__col">
            V{{i}}升V{{i+1}}
          </Col>
          <Col span="12" class="detail-table__col">
            赠送积分：{{ rule.pointAmount }}
          </Col>
        </Row>
        <Row>
          <Col span="24" class="detail-table__col">
            <table width="100%">
              <tr>
                <td width="20%" height="24">优惠券名称</td>
                <td width="20"></td>
                <td>面额</td>
                <td width="10%">类型</td>
                <td width="20%">有效期</td>
                <td width="150">可用渠道</td>
                <td width="150">最低使用金额(元)</td>
              </tr>
              <tr v-for="(item, index) in rule.couponList" :key="index">
                <td height="24">{{ item.refName }}</td>
                <td width="20"></td>
                <td>{{ (item.refType === 1 ? Number(item.promotionAmount) * 1000 / 100 : item.promotionAmount) + (item.refType === 0 ? '元' : item.refType === 1 ? '折' : '枚') }}</td>
                <td>{{ getEnumsName(item.refType, couponTypeList) }}</td>
                <td>{{ item.expirationType ? (item.startTime + '至' + item.endTime) : (item.dayNum + '天') }}</td>
                <td>{{ item.channel | getChannelsName }}</td>
                <td>{{ item.accumAmount }}</td>
              </tr>
            </table>
          </Col>
        </Row>
      </div>
      <Row v-if="type == 0">
        <Col span="24" class="detail-table__col">
          面向渠道：{{ detail.channel | getChannelsName }}
        </Col>
      </Row>
      <Row v-if="isGameType">
        <Col span="12" class="detail-table__col">
          面向会员：{{ detail.memberLevelIds | getLevelsName }}
        </Col>
        <Col span="12" class="detail-table__col">
          参与消耗积分：{{ detail.activityCostRule && detail.activityCostRule.spendPrice }}
        </Col>
      </Row>
      <Row v-if="isGameType">
        <Col span="24" class="detail-table__col">
          次数限制：每人可抽奖{{ detail.limitTimes }}{{ getEnumsName(detail.limitType, limitList) }}，每人最多中奖{{ detail.winLimitTimes }}{{ getEnumsName(detail.winLimitType, limitList) }}
        </Col>
      </Row>

      <Row>
        <Col :span="12" class="detail-table__col" v-if="type === 0">
          赠送积分：{{ pointAmount }}
        </Col>
        <Col :span="(type === 10 || type === 11) ? 24 : 12" class="detail-table__col">
          活动状态：{{ getEnumsName(detail.activityStatus, statusList) }}
        </Col>
        <!-- <Col :span="12" class="detail-table__col" v-if="type === 0">
          是否推送消息：{{ getEnumsName(detail.isPushMessage, pushMsgList) }}
        </Col> -->
        <Col :span="12" class="detail-table__col" v-if="isGameType">
          分享标题：{{ detail.shareTitle }}
        </Col>
      </Row>
      <Row>
        <Col span="24" class="detail-table__col">
          <table>
            <tr>
              <td width="62" valign="top">活动{{(type === 0 || type ===10) ? '说明' : '规则'}}：</td>
              <td style="word-break:break-all;"  v-html="detail.activityRule"></td>
            </tr>
          </table>
        </Col>
      </Row>
      <Row v-if="isGameType">
        <Col span="24" class="detail-table__col">
          <table>
            <tr>
              <td width="62" valign="top">分享封面：</td>
              <td><img :src="shareImg[type - 1]" width="160" height="120"></td>
            </tr>
          </table>
        </Col>
      </Row>
      <Row v-show="type==11">
        <Col :span="12" class="detail-table__col">
          分享标题：{{ detail.shareTitle }}
        </Col>
        <Col :span="12" class="detail-table__col">
         <table>
            <tr>
              <td width="62" valign="top">分享封面：</td>
              <td><img :src="detail.shareImage" width="160" height="120"></td>
            </tr>
          </table>
        </Col>
      </Row>
      <Row v-if="type==11">
        <Col span="24" class="detail-table__col">
          单个分享链接最多领取人数: {{ detail.limitTimes }}人，每人每天最多领取红包数量: {{ detail.winLimitTimes }}个
        </Col>
      </Row>
      <Row v-if="type == 11">
        <Col span="24" class="detail-table__col">
          <table width="100%" class="detail-inner-table">
            <tr>
              <td>优惠券名称</td>
              <td>面额</td>
              <td>类型</td>
              <td>有效期</td>
              <td>可用渠道</td>
              <td>中奖概率(%)</td>
            </tr>
            <tr v-for="(item, index) in detail.activityGiftList" :key="index">
              <td>{{ item.refName }}</td>
              <td>{{ (item.refType === 1 ? Number(item.promotionAmount) * 1000 / 100 : item.promotionAmount) + (item.refType === 0 ? '元' : item.refType === 1 ? '折' : '枚') }}</td>
              <td>{{ getEnumsName(item.refType, couponTypeList) }}</td>
              <td>{{ item.expirationType ? (item.startTime + '至' + item.endTime) : (item.dayNum + '天') }}</td>
              <td>{{ item.channel | getChannelsName }}</td>
              <td>{{ item.hitRate * 100 }}%</td>
            </tr>
          </table>
        </Col>
      </Row>
      <Row v-if="type == 0 || isGameType">
        <Col span="24" class="detail-table__col">
          <table width="100%">
            <tr>
              <td width="72" valign="top">{{ type == 0 ? '优惠券列表' : '奖品列表' }}：</td>
              <td>
                <table class="detail-inner-table"  v-if="type == 0">
                  <tr>
                    <td>优惠券名称</td>
                    <td>面额</td>
                    <td>类型</td>
                    <td>有效期</td>
                    <td>可用渠道</td>
                    <td>最低使用金额(元)</td>
                  </tr>
                  <tr v-for="(item, index) in detail.activityGiftList.filter(item => item.refType !== 3)" :key="index">
                    <td>{{ item.refName }}</td>
                    <td>{{ (item.refType === 1 ? Number(item.promotionAmount) * 1000 / 100 : item.promotionAmount) + (item.refType === 0 ? '元' : item.refType === 1 ? '折' : '枚') }}</td>
                    <td>{{ getEnumsName(item.refType, couponTypeList) }}</td>
                    <td>{{ item.expirationType ? (item.startTime + '至' + item.endTime) : (item.dayNum + '天') }}</td>
                    <td>{{ item.channel | getChannelsName }}</td>
                    <td>{{ item.accumAmount }}</td>
                  </tr>
                </table>
                <table class="detail-inner-table"  v-if="isGameType">
                  <tr>
                    <td>奖品名称</td>
                    <td>券名称</td>
                    <td>积分数量</td>
                    <td>类型</td>
                    <td>中奖概率</td>
                    <td>奖品数量</td>
                  </tr>
                  <tr v-for="(item, index) in detail.activityGiftList" :key="index">
                    <td>{{ item.activityGiftName }}</td>
                    <td>{{ item.refName ? item.refName : '--' }}</td>
                    <td>{{ item.pointAmount ? item.pointAmount : '--' }}</td>
                    <td>{{ getEnumsName(item.refType, couponTypeList) || ['积分','手动录入商品'][item.refType - 3] }}</td>
                    <td>{{ item.hitRate * 100 + '%' }}</td>
                    <td>{{ item.giftAmount }}</td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </Col>
      </Row>
      <Row v-if="isGameType">
        <Col span="12" class="detail-table__col">
          未中奖概率：{{ missRate }}%
        </Col>
        <Col span="12" class="detail-table__col">
          未中奖展示：{{ detail.reminder }}
        </Col>
      </Row>
      <Row v-if="type==0 || type==10">
        <Col span="12" class="detail-table__col">
          推送微信消息:{{ wechatName ? wechatName : '无' }}
        </Col>
        <Col span="12" class="detail-table__col">
          微信消息模板：{{ wechat ? wechat : '无'}}
        </Col>
      </Row>
      <Row v-if="type==0 || type==10">
        <Col span="12" class="detail-table__col">
          推送短信消息:{{ messageName ? messageName : '无' }}
        </Col>
        <Col span="12" class="detail-table__col">
          短信消息模板：{{ message ? message : '无' }}
        </Col>
      </Row>
      <Row>
        <Col span="12" class="detail-table__col">
          创建时间：{{ (detail.createTime || '').replace(/-/g, '/') }}
        </Col>
        <Col span="12" class="detail-table__col">
          编辑时间：{{ (detail.updateTime || '').replace(/-/g, '/') }}
        </Col>
      </Row>
      <Row>
        <Col span="12" class="detail-table__col">
          创建人：{{ detail.creatorName }}
        </Col>
        <Col span="12" class="detail-table__col">
          编辑人：{{ detail.operatorName }}
        </Col>
      </Row>
    </div>
    <div class="form-btn"
              style="margin-top: 15px;text-align:center;">
      <Button class="system-submit-btn" type="primary" v-if="isGameType"
              @click="handlePreview"
              >预览</Button>
      <Button class="system-submit-btn"
        @click="handleReset"
        style="margin-left: 8px">取消</Button>
    </div>
    <Modal v-model="dialogPreview" width="430" title="预览">
    <div style="text-align:center;height:550px; width:400px; overflow-y:scroll;">
        <div :class="'gamebg' + type">
          <span>{{ detail.activityCostRule && detail.activityCostRule.spendPrice }} 积分</span>
          <p v-html="detail.activityRule"></p>
          <div :class="['zhuanpanbox', 'z' + (detail.activityGiftList.length + 1)]">
            <div :class="['name', 'name' + index]" v-for="(item, index) in detail.activityGiftList" :key="index">{{ item.activityGiftName }}</div>
            <div :class="['name', 'name' + detail.activityGiftList.length]" >
              {{ detail.reminder }}
            </div>
            <img src="./imgs/game_start.png" width="87" height="100" class="zhizheng">
          </div>
        </div>
    </div>
    <div slot="footer">
        <Button @click="dialogPreview = false">关闭</Button>
    </div>
  </Modal>
  </div>
</template>

<script>
import { routeEqual } from '@/libs/util'
import { mapState } from 'vuex'
import { getMessages } from '@/api/market/message'
import { getMemberLevelList } from '@/api/member/index.js'
import { queryActive } from '@/api/market/active.js'
import enumsMixin from '../enums.js'
let that
export default {
  name: 'market_active_detail',
  mixins: [enumsMixin],
  data () {
    return {
      id: '',
      type: '',
      detail: {
        activityGiftList: []
      },
      extraRule: [],
      pointAmount: '',
      missRate: '',
      shareImg: [ require('./imgs/share1.jpg'), require('./imgs/share2.jpg'), require('./imgs/share3.jpg') ],
      memberLevelList: [],
      dialogPreview: false,
      sendWechat: '',
      sendMessage: '',
      sendWechats: [{ templateName: '无', id: '-1' }],
      sendMessages: [{ templateName: '无', id: '-1' }],
      wechatName: '',
      messageName: '',
      wechat: '',
      message: ''
    }
  },
  beforeCreate: function () {
    that = this
  },
  watch: {
    sendWechat (val) {
      this.sendWechats.forEach(item => {
        if (item.id === val) {
          this.wechatName = item.templateName
          this.wechat = item.content || ''
        }
      })
    },
    sendMessage (val) {
      this.sendMessages.forEach(item => {
        if (item.id === val) {
          this.messageName = item.templateName
          this.message = item.content || ''
        }
      })
    },
    sendWechats (arr) {
      arr.forEach(item => {
        if (item.id === this.sendWechat) {
          this.wechatName = item.templateName
          this.wechat = item.content || ''
        }
      })
    },
    sendMessages (arr) {
      arr.forEach(item => {
        if (item.id === this.sendMessage) {
          this.messageName = item.templateName
          this.message = item.content || ''
        }
      })
    }
  },
  filters: {
    getChannelsName (value) {
      if (value === '*') {
        return that.channelList.map(item => item.label).join(',')
      }
      if (value) {
        let arr
        if (typeof value === 'string') {
          arr = value.split(',')
        } else {
          arr = value
        }
        return arr.map((value) => {
          const result = that.channelList.filter(item => item['value'] === value)
          return result[0] ? result[0]['label'] : ''
        }).join(',')
      }
      return ''
    },
    getLevelsName (value) {
      if (value) {
        let arr = value.split(',')
        return arr.map((value) => {
          const result = that.memberLevelList.filter(item => item['memberLevelId'] === value)
          return result[0] ? ('V' + result[0]['memberLevel']) : ''
        }).join(',')
      }
      return ''
    }
  },
  mounted () {
    this.id = this.$route.params.id
    this.type = parseInt(this.$route.params.type)
    this.getDetail()
    if (this.isGameType) {
      getMemberLevelList({
        merchantId: this.merchantId
      }).then(res => {
        const result = res.data || {}
        if (result.status === 200) {
          this.memberLevelList = result.data
        } else {
          this.$Message.error(`${result.error}`)
        }
      }).catch(err => {
        this.$Message.error(`${err}`)
      })
    }
  },
  computed: {
    ...mapState({
      merchantId: state => state.user.merchantId
    }),
    isGameType () {
      return this.type === 1 || this.type === 2 || this.type === 3
    }
  },
  methods: {
    getDetail () {
      if (this.type === 0 || this.type === 10) {
        this.getEnums(1).then(data => {
          this.sendWechats = [{ templateName: '无', id: '-1' }].concat(data || [])
        })
        this.getEnums(2).then(data => {
          this.sendMessages = [{ templateName: '无', id: '-1' }].concat(data || [])
        })
      }
      queryActive({
        activityId: this.id,
        merchantId: this.merchantId
      }).then(res => {
        const result = res.data || {}
        if (result.status === 200) {
          this.detail = result.data
          if (this.isGameType) {
            let rate = 0
            result.data.activityGiftList.forEach(item => {
              rate += item.hitRate * 100
            })
            this.missRate = 100 - rate
          }
          if (this.type === 0) {
            let giftAmountList = this.detail.activityGiftList.filter(item => item.refType === 3)
            this.pointAmount = giftAmountList.length === 1 ? giftAmountList[0].pointAmount : ''
          }
          if (this.type === 10) {
            var extraRule = []
            for (var p in result.data.extraRule) {
              extraRule[p] = result.data.extraRule[p][0]
              extraRule[p].couponList = result.data.extraRule[p].slice(1)
            }
            this.extraRule = extraRule
          }
          if (this.type === 0 || this.type === 10) {
            let wechatFilter = (this.detail.templates || []).filter(item => item.templateType === 1)
            let messageFilter = (this.detail.templates || []).filter(item => item.templateType === 2)
            this.sendWechat = wechatFilter.length > 0 ? wechatFilter[0].templateId : '-1'
            this.sendMessage = messageFilter.length > 0 ? messageFilter[0].templateId : '-1'
          }
        } else {
          this.$Message.error(`${result.error}`)
        }
      }).catch(err => {
        this.$Message.error(`${err}`)
      })
    },
    getEnums (templateType) {
      return new Promise((resolve, reject) => {
        getMessages({
          templateType,
          merchantId: this.merchantId,
          suitableType: this.type,
          status: 1
        }).then(res => {
          const result = res.data || {}
          if (result.status === 200) {
            resolve(result.data)
          } else {
            this.$Message.error(`${result.error}`)
          }
        }).catch(err => {
          this.$Message.error(`${err}`)
        })
      })
    },
    handlePreview () {
      this.dialogPreview = true
    },
    handleReset () {
      this.$store.commit('closeTag', this.$route)
      this.$store.commit('setTagNavList', this.$store.state.app.tagNavList.filter(item => !routeEqual(this.$route, item)))
      this.$nextTick(() => {
        this.$router.push({
          name: 'market_active_list'
        })
      })
    }
  }
}
</script>
<style lang="less" scoped>
.gamebg1{
    width: 375px;
    position: relative;
    min-height: 857px;
    background: url(./imgs/game1.jpg) no-repeat 0 0 #91c03b;
    span{
      position: absolute;
      left: 220px;
      top: 325px;
      color: #fff;
      font-size: 16px;
    }
    p{
      padding:680px 20px 20px;
      color: #3e6201;
      font-size: 14px;
      text-align:justify;
      word-break: break-all;
    }
  }
  .zhuanpanbox{ display: none;}
  .gamebg2{
    width: 375px;
    position: relative;
    min-height: 1046px;
    background: url(./imgs/game2.jpg) no-repeat 0 0 #feeac8;
    span{
      position: absolute;
      left: 220px;
      top: 268px;
      color: #fff;
      font-size: 16px;
    }
    p{
      padding:870px 20px 20px;
      color: #a46427;
      font-size: 14px;
      text-align:justify;
      word-break: break-all;
    }
    .zhuanpanbox{
      display:block;
      width:375px;
      height: 375px;
      position: absolute;
      left:0;
      top: 281px;
    }
    .name{
      position: absolute;
      line-height:20px;
      font-size: 14px;
      width: 80px;
      text-align: center;
    }
    .z2{
      background: url(./imgs/wheel2.png) no-repeat 0 0;
    .name0{
            top: 50%;
            margin-top: -20px;
            right:50px;
            color: #FFFFFF;
            transform: rotate(90deg);}
    .name1{
            top: 50%;
            margin-top: -20px;
            left:50px;
            color: #CB2B2B;
            transform: rotate(270deg);}
    }
    .z3{ background: url(./imgs/wheel3.png) no-repeat 0 0;
      .name0{
        color: #FFFFFF;
        top:132px;
        right:69px;
        transform: rotate(60deg);
      }
      .name1{
        color:#CB2B2B;
        bottom:81px;
        left:147px;
        transform:rotate(180deg);
      }
      .name2{
        color:#FFFFFF;
        top:132px;
        left:69px;
        transform:rotate(300deg);
      }
    }
    .z4{ background: url(./imgs/wheel4.png) no-repeat 0 0;
      .name0{
        color: #FFFFFF;
        top:115px;
        right:84px;
        transform: rotate(45deg);
      }
      .name1{
        color: #CB2B2B;
        bottom:115px;
        right:84px;
        transform: rotate(135deg);
      }
      .name2{
        color: #FFFFFF;
        bottom:115px;
        left:84px;
        transform: rotate(225deg);
      }
      .name3{
        color: #CB2B2B;
        top:115px;
        left:84px;
        transform: rotate(315deg);
      }
    }
    .z5{ background: url(./imgs/wheel5.png) no-repeat 0 0;
      .name0{
        color:#FFFFFF;
        top:98px;
        right:95px;
        transform: rotate(36deg);
      }
      .name1{
        color:#CB2B2B;
        top:195px;
        right:59px;
        transform: rotate(108deg);
      }
      .name2{
        color:#FFFFFF;
        top:260px;
        right:145px;
        transform: rotate(180deg);
      }
      .name3{
        color:#CB2B2B;
        top:195px;
        left:59px;
        transform: rotate(252deg);
      }
      .name4{
        color:#FFFFFF;
        top:102px;
        left:95px;
        transform: rotate(324deg);
      }
    }
    .z6{
      background: url(./imgs/wheel6.png) no-repeat 0 0;
      .name0{
        color:#FFFFFF;
        top:90px;
        right:104px;
        transform: rotate(30deg);
      }
      .name1{
        color:#CB2B2B;
        top:170px;
        right:55px;
        transform: rotate(90deg);
      }
      .name2{
        color:#FFFFFF;
        bottom:90px;
        right:104px;
        transform: rotate(150deg);
      }
      .name3{
        color:#CB2B2B;
        bottom:90px;
        left:104px;
        transform: rotate(210deg);
      }
      .name4{
        color:#FFFFFF;
        top:170px;
        left:52px;
        transform: rotate(270deg);
      }
      .name5{
        color:#CB2B2B;
        top:90px;
        left:104px;
        transform: rotate(330deg);
      }
    }
    .zhizheng{
      position: absolute;
      top:128px;
      left: 145px;
    }
  }
  .gamebg3{
    width: 375px;
    position: relative;
    min-height: 891px;
    background: url(./imgs/game3.jpg) no-repeat 0 0 #b57841;
    span{
      position: absolute;
      left: 220px;
      top: 273px;
      color: #f1dd1f;
      font-size: 16px;
    }
    p{
      padding:710px 20px 20px;
      color: #592e13;
      font-size: 14px;
      text-align:justify;
      word-break: break-all;
    }
  }
</style>
<style lang="less">
@import '~@/assets/stylus/detail-table.less';
.subcard-detail {
  padding: 40px 80px
}
.detail-inner-table{
  margin-left: 5%;
  width: 95%;
}
.detail-inner-table td {
  height: 30px;
  vertical-align: top;
}
</style>
